<!DOCTYPE HTML>
<!--[if IE 8]>
<html class="ie8 no-js" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->
<head th:replace="common/head::sf-head"></head>
<body>
<!-- begin container -->
<div id="wrap">
    <!-- begin header -->
    <header th:replace="common/header::sf-protal-header"></header>
    <!-- end header -->
    <!-- begin content -->
    <section id="content" class="container clearfix">
        <!-- begin page header -->
        <header id="page-header">
            <h1 id="page-title">联系我们</h1>
        </header>
        <!-- end page header -->

        <!-- begin main content -->

        <!-- begin google map -->
        <section>
            <div id="addressMap"
                 data-zoom="17"
                 style="width: 100%; height: 400px;">
            </div>
        </section>
        <!-- end google map -->

        <!-- begin main -->
        <section id="main" class="three-fourths">
            <!-- begin contact form -->
            <h2>联系我们</h2>
            <p>我们很高兴收到您的信息，不管是咨询，提议，合作还是打个招呼都欢迎的联系。</p>
            <div class="notification-box notification-box-success" style="display: none;">
                <p>Your message has been successfully sent. We will get back to you as soon as possible.</p>
                <a href="#" class="notification-close notification-close-success">x</a>
            </div>

            <div class="notification-box notification-box-error " style="display: none;">
                <p>Your message couldn't be sent because a server error occurred. Please try again.</p>
                <a href="#" class="notification-close notification-close-error">x</a>
            </div>
            <form id="contact-form" class="content-form" method="post">
                <p>
                    <label for="name">姓名:<span class="note">*</span></label>
                    <input id="name" type="text" name="custName" class="required">
                </p>
                <p>
                    <label for="email">电话:<span class="note">*</span></label>
                    <input id="email" type="text" name="custPhone" class="required">
                </p>
                <p>
                    <label for="url">QQ:</label>
                    <input id="url" type="text" name="custQq">
                </p>
                <p>
                    <label for="subject">微信:<span class="note"></span></label>
                    <input id="subject" type="text" name="custWx">
                </p>
                <p>
                    <label for="message">联系内容:<span class="note"></span></label>
                    <textarea id="message" cols="68" rows="8" name="custContent"></textarea>
                </p>
                <p>
                    <input id="submit" class="button" type="submit" name="submit" value="点击发送">
                </p>
            </form>
            <p><span class="note">*</span>*为必填内容</p>
            <!-- end contact form -->
        </section>
        <!-- end main -->

        <!-- begin sidebar -->
        <aside id="sidebar" class="one-fourth column-last">
            <div class="widget contact-info">
                <h3>联系信息</h3>
                <p class="address"><strong>地址:</strong>张家口市宣化区大学生创业园407</p>
                <p class="phone"><strong>电话:</strong>15603388680</p>
                <p class="email"><strong>QQ:</strong> <a href="">442190294</a></p>
                <p class="business-hours"><strong>工作时间:</strong><br>
                    周一到周五: 9:00-18:00<br>
                    周六: 10:00-17:00<br>
                    周日: 休息
                </p>
            </div>
        </aside>
        <!-- end sidebar -->

        <!-- end main content -->
    </section>
    <!-- end content -->

    <!-- begin footer -->
    <footer th:replace="common/footer::sf-protal-footer"></footer>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=d5737ecbd4e9bc1d5801b4c1fda41cd4"></script>
    <!-- end footer -->
</div>
<!-- end container -->
<script type="text/javascript">
    // 集成高德地图
    function onApiLoaded() {
        var map = new AMap.Map('addressMap', {
            center: [117.000923, 36.675807],
            zoom: 12,
            zoomEnable:false
        });
        map.plugin(["AMap.ToolBar"], function () {
            map.addControl(new AMap.ToolBar());
        });
    }

    var url = 'https://webapi.amap.com/maps?v=1.4.15&key=d5737ecbd4e9bc1d5801b4c1fda41cd4&callback=onApiLoaded';
    var jsapi = document.createElement('script');
    jsapi.charset = 'utf-8';
    jsapi.src = url;
    document.head.appendChild(jsapi);
    // 创建一个marker
    /*var marker = new AMap.Marker({
        position: new AMap.LngLat(40.6106930000,115.0531770000),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: '胜凡科技'
    });
    map.add(marker);*/
</script>
</body>
</html>